<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="300px">
		<el-form ref="formRef" :model="form" label-width="auto" disabled>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="货款总金额" prop="money_zong">
						<el-input v-model="form.money_zong" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="提现手续费" prop="procedure_moneyzong">
						<el-input v-model="form.procedure_moneyzong" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="预计到账金额" prop="arrival_amount">
						<el-input v-model="form.arrival_amount" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { supplierWithdrawal, supplierWithdrawalBasics } from '/@/api/admin1';

export default {
	name: 'ApplicationWithdrawalDialog',
	setup() {
		const state: any = reactive({
			title: '本次货款提现',
			open: false,
			form: {},
			submitLoading: false,
		});

		const formRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					console.log('state.form', state.form);
					_supplierWithdrawal({
						// order_sn: state.form.order_sn,
						time: state.form.time,
						voucher: '',
					});
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			reset();
			_supplierWithdrawalBasics(config);
		};
		// 表单重置
		const reset = () => {
			state.form = {
				money_zong: '',
				procedure_moneyzong: '',
				arrival_amount: '',
				order_sn: '',
			};
			(formRef.value as any)?.resetFields();
		};

		/********** 网络事件 **********/
		// 获取提现基础信息
		const _supplierWithdrawalBasics = (_data: any) => {
			supplierWithdrawalBasics(_data).then((res: any) => {
				console.log('获取提现基础信息', res);
				state.form = {
					money_zong: res.data.info.money_zong,
					procedure_moneyzong: res.data.info.procedure_moneyzong,
					time: res.data.info.time,
					order_sn: _data.order_sn,
					arrival_amount: (Number(res.data.info.money_zong) * 1000 - Number(res.data.info.procedure_moneyzong) * 1000) / 1000,
				};
			});
		};
		// 货款提现
		const _supplierWithdrawal = (_data: object) => {
			supplierWithdrawal(_data).then((res: any) => {
				console.log('货款提现', res);
				ElMessage.success('申请成功');
				onCancel();
				callback();
			});
		};

		return {
			formRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
